<template>
    <div class="login-container ub main-center cross-center">
        <div class="login-box">
            <div class="dt-title">
                <h3 style="letter-spacing: 1px">CMS智慧平台管理端</h3>
                <span class="dt-title-span">DT Smart Platform Management</span>
            </div>
            <el-form :rules="rules" ref="userForm" :model="userForm" class="dt-form" label-position="left" label-width="0px">
                <el-form-item prop="username">
                    <el-input v-model="userForm.username" placeholder="请输入账号" auto-complete="off" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="userForm.password" placeholder="请输入密码" auto-complete="off" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-col :span="12">
                        <el-input v-model="userForm.code" placeholder="验证码" auto-complete="off" prefix-icon="el-icon-refresh"></el-input>
                    </el-col>
                    <el-col :span="12">
                        <div class="dt-code-div">
                            <img class="dt-code" :src="codeSrc" @click="getCode()" alt="验证码"/>
                        </div>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button @click="loginFun()" type="primary" class="dt-button" :loading="loadingStatus">{{loadingStatus ? loadingWaText:loadingBtnText}}</el-button>
                </el-form-item>
                <div class="ub main-justify">
                    <el-checkbox v-model="checked">记住密码</el-checkbox>
                    <span class="dt-phone-login">手机号码快速登录</span>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    data() {
        return {
            // 表单参数
            userForm: {
                username: null,
                password: null,
                code: null
            },
            // 登录按钮参数
            loadingStatus: false,
            loadingBtnText: '登 录',
            loadingWaText: '登 录 中...',
            // 验证码地址
            codeSrc: '',
            // 选择记住密码
            checked: false,
            // 表单校验
            rules: {
                username: [{required: true, trigger: "change",  message: "请输入用户名"}],
                password: [{required: true, trigger: "change", message: "请输入密码"}],
                code: [{required: true, trigger: "change", message: "请输入验证码"}]
            }
        };
    },
    created() {
        this.getCode();
    },
    mounted() {
        window.addEventListener('keydown',this.keyDown);
    },
    destroyed() {
        window.removeEventListener('keydown',this.keyDown,false);
    },
    methods: {
        // 回车登录操作
        keyDown(e) {
            if(e.keyCode === 13) {
                this.loginFun();
            }
        },
        // 登录提交操作
        loginFun() {
            const that = this
            this.$refs.userForm.validate(async valid => {
                if (valid) {
                    let formData = new FormData()
                    formData.append("username", that.userForm.username)
                    formData.append("password", this.cryptoAes.Encrypt(that.userForm.password))
                    formData.append("code", that.userForm.code)
                    this.loadingStatus = true
                    this.$api.login.sysLogin(formData).then(res => {
                        if (res.data.code === 2000) {
                            let menuList = res.data.data.menuList
                            let routerList = res.data.data.routerList
                            let authList = res.data.data.authList
                            // 存储菜单数据
                            localStorage.setItem("menuList", JSON.stringify(menuList))
                            // 存储路由数据
                            localStorage.setItem("routerList", JSON.stringify(routerList))
                            // 权限
                            localStorage.setItem("authList", JSON.stringify(authList))
                            // 提交到store
                            this.$store.commit("getMenuList", this.$router)
                            // 存储Token令牌
                            Vue.ls.set('token',res.data.data.token)
                            Vue.ls.set('userId',res.data.data.userId)
                            Vue.ls.set('accountName',res.data.data.accountName)
                            this.loadingStatus = false
                            // 登录成功跳转到首页
                            this.$router.push("/admin/home")
                        }else if(res.data.code === 6001){
                            this.$message({type: 'error',message: res.data.msg})
                            this.getCode()
                            this.loadingStatus = false
                            return false
                        }else{
                            this.$message({type: 'error',message: res.data.msg})
                            this.loadingStatus = false
                            return false
                        }
                    })
                }
            });
        },
        // 刷新验证码
        getCode(){
            this.codeSrc = "http://127.0.0.1:9090/api/v1/verification/getCode?t="+ new Date().getTime()
        }
    }
};
</script>

<style lang="less" scoped>
.login-container {
    height: 100vh;
    background-color: #ecf5ff;
}
.login-box {
    width: 360px;
    height: 430px;
    background-color: #ffffff;
    border-radius: 3px;
    position: absolute;
    transform: translate(-50% -50%);
    .dt-title {
        padding: 20px 20px 0 20px;
        text-align: center;
    }
    .dt-title h3 {
        font-weight: 600;
        font-size: 1.3rem;
        color: #525252;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        margin: 15px 0;
    }
    .dt-title span {
        font-size: 0.9rem;
        color: #999;
        font-family: sans-serif;
    }
}
.dt-form {
    bottom: 0;
    width: 100%;
    padding: 30px 35px;
    box-sizing: border-box;
}
.dt-button {
    width: 100%;
    background-color: #113dce !important;
    border-color: #113dce !important;
    color: #ffffff !important;
}
.dt-button:hover, :link, :visited {
    background-color: #113dce !important;
    border-color: #113dce !important;
    color: #ffffff !important;
}
.dt-code-div {
    width: 138px;
    height: 40px;
}
.dt-code {
    margin-left: 5px;
    width: 138px;
    border-radius: 2px;
    border: 1px solid #e3e3e3;
}
.dt-phone-login {
    color: #606266;
    font-size: 14px;
}
/deep/.el-input__icon {
    color: #303133 !important;
    font-weight: 600 !important;
}
/deep/.el-input__inner {
    border-radius: 2px !important;
}
/deep/.el-button {
    border-radius: 2px !important;
    background-color: #1a53ff !important;
    border-color: #1a53ff !important;
}
/deep/.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #1a53ff;
    border-color: #1a53ff;
}
/deep/.el-checkbox__input.is-checked+.el-checkbox__label {
    color: #1a53ff;
}
</style>
